<template>
    <el-row :gutter="20" style="margin-top:15px;margin-bottom: 15px;">
     <el-col :span="6">
         <div class="home-center">
              <div class="center-img-icon-c1">
                  <img src="" alt="">
              </div>
              <div class="center-info-notice">
                  <p class="info-num-c1"><span>{{basicInfo.totalDistance||0}}</span><span>公里</span></p>
                  <p class="info-num-cc1">总里程</p>
              </div>  
         </div>
     </el-col> 
     <el-col :span="6">
         <div class="home-center">
             <div class="center-img-icon-c2">
                 <img src="" alt="">
             </div>
             <div class="center-info-notice">
                  <p class="info-num-c2"><span>{{basicInfo.continueTime||0}}</span><span>分钟</span></p>
                  <p class="info-num-cc2">连续驾驶时长</p>
             </div>  
         </div>
     </el-col>
     <el-col :span="6">
         <div class="home-center">
             <div class="center-img-icon-c3">
                <img src="" alt="">
             </div>
             <div class="center-info-notice">
                  <p class="info-num-c3"><span>{{basicInfo.nightTime||0}}</span><span>分钟</span></p>
                  <p class="info-num-cc3">夜间行驶时长</p>
             </div>  
         </div>
     </el-col>
     <el-col :span="6">
         <div class="home-center">
             <div class="center-img-icon-c4">
                 <img src="" alt="">
             </div>
             <div class="center-info-notice">
                  <p class="info-num-c4"><span>{{basicInfo.totalTime||0}}</span><span>分钟</span></p>
                  <p class="info-num-cc4">行驶时间</p>
             </div>  
         </div>
     </el-col>
   </el-row>
</template>

<script>
export default{
  props: ['basicInfo'],
  created () {

  }
}

</script>

<style scoped>
.home-center{
   background-color: #fff;
   height: 100px;
   min-width: 210px;
}
.center-img-icon-c1,.center-img-icon-c2,.center-img-icon-c3,.center-img-icon-c4{
    height: 100%;
    width:35%;
    float: left;
    text-align: center;
}
.center-img-icon-c1{
    background: #7D7DDF;
}
.center-img-icon-c2{
    background: #E3C141;
}
.center-img-icon-c3{
    background: #1FB2AA;
}
.center-img-icon-c4{
    background: #1ABEE1;
}
.center-info-notice{
    /* border:1px solid blue; */
    height: 100%;
      width: 64%;
    float: left;
    text-align: center;
}
.home-center img{
        margin-top: 27px;
}
.info-num-c1,.info-num-c2,.info-num-c3,.info-num-c4{
      margin: 20px 0px 2px 0px;
}
.info-num-c1 span:first-child,.info-num-c2 span:first-child,.info-num-c3 span:first-child,.info-num-c4 span:first-child{
    font-size: 30px;
}
.info-num-c1 span:last-child,.info-num-c2 span:last-child,.info-num-c3 span:last-child,.info-num-c4 span:last-child{
    font-size: 20px;
}
.info-num-c1{
    color:#7D7DDF;
}
.info-num-c2{
    color:#E3C141;
}
.info-num-c3{
    color:#1FB2AA;
}
.info-num-c4{
    color:#1ABEE1;
}
.info-num-cc1,.info-num-cc2,.info-num-cc3,.info-num-cc4{
       margin: 0px;
       font-size: 16px;
       color:#333333;
}
</style>
